﻿@{
    ViewBag.Title = "ScoreDistribute";
    Layout = "~/Views/Shared/_GridCommonLayout.cshtml";
}

<h2><i class="glyphicon glyphicon-star" style="margin-right: 10px;"></i>@ViewBag.paper.STestName 结果分析</h2>
<hr />

<div class="panel panel-primary">
    <div class="panel-heading">
        试卷详情
    </div>
    <div class="panel-footer">
        <div class="list-group">
            <a href="#" class="list-group-item" style="color: black;">时间：@ViewBag.paper.IOverTime 分钟</a>
            <a href="#" class="list-group-item" style="color: black;">难度：@ViewBag.paper.IDiff</a>
            <a href="#" class="list-group-item" style="color: black;">总分：@ViewBag.paper.ITotal</a>
            <a href="#" class="list-group-item" style="color: black;">人数：@ViewBag.count</a>
        </div>
        <button class="btn btn-primary" id="errorBtn">错题详情</button> <button class="btn btn-primary" id="scoresBtn">分数统计</button>
    </div>
</div>
<div id="scores" style="width: 100%; height: 500px; float:right;"></div>

<div id="error" style="width:100%;height:500px;"></div>


<script src="~/Js/echarts-plain.js"></script>
<script>

    $(function () {
        $("#error").hide();
        $("#errorBtn").click(function () {
            $("#scores").hide();
            $("#error").show();
        });
        $("#scoresBtn").click(function () {
            $("#error").hide();
            $("#scores").show();
        });


    })


    //分数统计
    var myChart = echarts.init(document.getElementById("scores"));
    var option = {
        title: {
            text: '学生考试成绩分布图',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['人数']
        },
        toolbox: {
            show: true,
            feature: {   
                
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                data:['0-10','10-20','20-30','30-40','40-50','50-60','60-70','70-80','80-90','90-100']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '人数',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8],
                markPoint: {
                    data: [
                        { name: '最高分', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                        { name: '最低分', value: 2.6, xAxis: 0, yAxis: 3 }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                }
            }
        ]
    };
    myChart.setOption(option);
    //分数统计结束！！！！！！！！！！！！

    //错题统计
    var labelTop = {
        normal: {
            label: {
                show: true,
                position: 'center',
                textStyle: {
                    baseline: 'bottom'
                }
            },
            labelLine: {
                show: false
            }
        }
    };
    var labelBottom = {
        normal: {
            color: '#ccc',
            label: {
                show: true,
                position: 'center',
                formatter: function (a, b, c) { return 100 - c + '%' },
                textStyle: {
                    baseline: 'top'
                }
            },
            labelLine: {
                show: false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    var radius = [40, 55];
    var myChart1 = echarts.init(document.getElementById("error"));
    var option1 = {
        legend: {
            x: 'center',
            y: 'center',
            data: [
                'GoogleMaps', 'Facebook', 'Youtube', 'Google+', 'Weixin',
                'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram'
            ]
        },
        title: {
            text: '错题详情',
            subtext: '错得最多的十道题',
            x: 'center'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                type: 'pie',
                center: ['10%', '30%'],
                radius: radius,
                data: [
                    { name: 'other', value: 46, itemStyle: labelBottom },
                    { name: 'GoogleMaps', value: 54, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['30%', '30%'],
                radius: radius,
                data: [
                    { name: 'other', value: 56, itemStyle: labelBottom },
                    { name: 'Facebook', value: 44, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['50%', '30%'],
                radius: radius,
                data: [
                    { name: 'other', value: 65, itemStyle: labelBottom },
                    { name: 'Youtube', value: 35, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['70%', '30%'],
                radius: radius,
                data: [
                    { name: 'other', value: 70, itemStyle: labelBottom },
                    { name: 'Google+', value: 30, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['90%', '30%'],
                radius: radius,
                data: [
                    { name: 'other', value: 73, itemStyle: labelBottom },
                    { name: 'Weixin', value: 27, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['10%', '70%'],
                radius: radius,
                data: [
                    { name: 'other', value: 78, itemStyle: labelBottom },
                    { name: 'Twitter', value: 22, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['30%', '70%'],
                radius: radius,
                data: [
                    { name: 'other', value: 78, itemStyle: labelBottom },
                    { name: 'Skype', value: 22, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['50%', '70%'],
                radius: radius,
                data: [
                    { name: 'other', value: 78, itemStyle: labelBottom },
                    { name: 'Messenger', value: 22, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['70%', '70%'],
                radius: radius,
                data: [
                    { name: 'other', value: 83, itemStyle: labelBottom },
                    { name: 'Whatsapp', value: 17, itemStyle: labelTop }
                ]
            },
            {
                type: 'pie',
                center: ['90%', '70%'],
                radius: radius,
                data: [
                    { name: 'other', value: 89, itemStyle: labelBottom },
                    { name: 'Instagram', value: 11, itemStyle: labelTop }
                ]
            }
        ]
    };
    myChart1.setOption(option1);
</script>
